import React from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

function Message() {
  const messageArr = [
    { id: '01', title: '消息1' },
    { id: '02', title: '消息2' },
    { id: '03', title: '消息3' }
  ]

  return (
   <>
    <ul>
      {messageArr.map((v) => (
        <li key={v.id}>
          <Link to={`/home/message/detail/${v.id}/${v.title}`}>{v.title}</Link>
          {/* <Link to={{pathname: `/home/message/detail/${v.id}/${v.title}`}}>{v.title}</Link> */}
        </li>
      ))}
    </ul>
    <hr/>
    <Route path='/home/message/detail/:id/:title' component={Detail} />
   </>
  )
}

export default Message
